<template>
  <div class="statistical-2">
    <div class="col">
      <div class="row">
        <div class="chart" id="chart1"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart2"></div>
      </div>
      <div class="row">
        <Ranking></Ranking>
      </div>
    </div>
    <div class="col full">
      <div class="row map">

      </div>
      <div class="row" id="chart3">

      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="chart" id="chart4"></div>
      </div>
      <div class="row full">
        <Indicators></Indicators>
      </div>
    </div>
  </div>
</template>

<script>
import {getArrByKey, getSymbolData} from "@/utils/chart";
import {getRandomNum} from "@/utils/utils";
import Indicators from "@/components/Indicators/Indicators.vue";
import Ranking from "@/components/Ranking/Ranking.vue";
import {getProjectBar, getProjectMoneyBar,getProjectInfoRadar} from "@/api/statistical2";

export default {
  name: "Statistical2",
  components: {Ranking, Indicators},
  data() {
    return {
      charts: {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null
      },
    }
  },
  methods: {
    async initChart1() {
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.charts.chart1.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getProjectBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.06;//偏移量
      let option = {
        title: {
          text: '各县市项目数量',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>个</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：个',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(73,73,25,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolPosition: "end",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#6c6c34',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#bc4405"
                    },
                      {
                        offset: 1,
                        color: "#c6aa2c"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option)
    },
    async initChart2() {
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.charts.chart2.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getProjectMoneyBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.06;//偏移量
      let option = {
        title: {
          text: '各县市项目扶持资金',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>个</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：个',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(9,73,52,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'circle',
            symbolPosition: "end",
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#094934',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#4beab2"
                    },
                      {
                        offset: 1,
                        color: "#209988"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'circle',
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#8af6d0',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'circle',
            symbolSize: [15, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#8af6d0',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart2.hideLoading();
      this.charts.chart2.setOption(option)
    },
    initChart3() {//未调用数据接口
      this.charts.chart3 = this.$echarts.init(document.getElementById('chart3'));
      this.charts.chart3.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

      let option = {
        title: {
          text: '各县市重点项目扶持资金趋势',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        legend: {
          show: true,
          left: 'center',
          top: '45',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: month,
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 14}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'value',
          name: '单位：万元',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            showSymbol: false,
            name: '肃州区',
            data: getRandomNum(12, 1000, 800),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '玉门市',
            data: getRandomNum(12, 900, 700),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '瓜州县',
            data: getRandomNum(12, 900, 700),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '金塔县',
            data: getRandomNum(12, 800, 600),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '敦煌市',
            data: getRandomNum(12, 700, 500),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '肃北县',
            data: getRandomNum(12, 500, 300),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '阿克塞县',
            data: getRandomNum(12, 500, 300),
            type: 'line'
          },
        ]
      }
      this.charts.chart3.hideLoading();
      this.charts.chart3.setOption(option)
    },
    async initChart4() {
      this.charts.chart4 = this.$echarts.init(document.getElementById('chart4'));
      this.charts.chart4.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await getProjectInfoRadar();
      let project = data.project;
      let money = data.money;
      let area=data.area;
      let maxValue = Math.max.apply(null, [...project, ...money]);
      maxValue = maxValue + maxValue * 0.1;
      let option = {
        title: {
          text: '各县市项目数量、扶持资金雷达',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'item',
        },
        legend: {
          show: true,
          right: '10%',
          top: 'center',
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        radar: {
          center: ['30%', '55%'],
          radius: '50%',
          indicator:area.map((item)=>{
            return {name:item,max:maxValue}
          }),
        },
        color: ['#24cffd', '#9632ed'],
        series: [
          {
            areaStyle: {},
            type: 'radar',
            symbol: 'none',
            data: [
              {
                value: project,
                name: '项目数量'
              },
              {
                value: money,
                name: '扶持资金'
              }
            ]
          }
        ]
      }
      this.charts.chart4.hideLoading();
      this.charts.chart4.setOption(option)
    }
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart4();
    this.initChart3();
    this.$bus.$on('resize', () => {
      this.$bus.$on('resize', () => {
        Object.keys(this.charts).forEach((key) => {
          this.charts[key] && this.charts[key].resize()
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .col {
    height: 100%;
    width: calc(25% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .row {
      width: 100%;
      height: calc((100% - 40px) / 3);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);

      .chart {
        width: 100%;
        height: 100%;
      }
    }

    .row.full {
      height: calc((100% - 10px) / 3 * 2);
    }
  }

  .col.full {
    width: calc(50% - 20px);

    .row {
      height: calc((100% - 40px) / 3);
    }

    .row.map {
      height: 100px;
      margin-bottom:calc((100% - 10px) / 3 * 2 - 125px);
      background: none;
      backdrop-filter: none;
    }
  }
}
</style>
